.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.m-auto {
  margin: auto;
}
.y-scroll-auto {
  overflow-y: auto;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-justify-center {
  justify-content: center;
}
.flex-align-center {
  align-items: center;
}
.grid {
  display: grid;
}
@for $i from 1 through 10 {
  .gap-#{$i} {
    gap: #{$i}rem
  }
}


// lg：1200px 大屏
// md: 992px  中屏
// sm: min-width 768px 小屏
// xs: max-width 768px 超小型 
@media (min-width: 768px){
  @for $i from 1 through 10 {
    .grid-cols-#{$i} {
      grid-template-columns: repeat(#{$i}, 1fr)
    }
  }
}
@media (max-width: 768px){
  @for $i from 1 through 10 {
    .sm\:grid-cols-#{$i} {
      grid-template-columns: repeat(#{$i}, 1fr)
    }
  }
}